import React, { Component, Fragment } from "react";
// antd
import { Table, Button, Col, Pagination, Form, Input, Select, Typography, Space, Tag } from "antd";

// http
import http from '../../../utils/request';

const { Text, Link } = Typography;
const { Option } = Select;

class DatabaseHistory extends Component {
    constructor(props){
        super(props)
        this.state = {
            loading: false,

            // 分页
            total: '',
            page: 1,
            page_number: 10,

            // 搜索
            search_instance_region: null,
            search_instance_platform: null,
            search_instance_account_name: null,
            search_instance_resource_type: null,
            search_common: null,
            search_option_account_name: [],
            search_option_platform: [],
            search_option_account: [],
            search_option_region: [],
            search_business: null,
            label_list_option: [],
            label_list_option_name: [],

            selectedRowKeys: [],

            visable_label: false,
            loading_label: false,
            label_database_list: null,
            
            // 表格
            dataSource: [],
            columns: [
                {title: "实例ID/名称", dataIndex: "instance_id", key: "instance_id",
                    render: (text, rowData) => {
                        return(
                            <Space direction="vertical">
                                <Link href="">
                                    {rowData.instance_id}
                                </Link>
                                <Text >{rowData.name}
                                </Text>
                            </Space>
                        )
                    }
                },
                {title: "云平台", dataIndex: "cloud-platform", key: "cloud-platform",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.platform}-{rowData.account_name}</Tag>                                
                            </div>
                        )
                    }
                },
                {title: "区域", dataIndex: "zone", key: "zone",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.region}</Tag>
                            </div>
                        )
                    }
                },
                {title: "事业部", dataIndex: "division", key: "division",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.division}</Tag>
                            </div>
                        )
                    }
                },
                {title: "业务标签", dataIndex: "business", key: "business",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.business}</Tag>
                            </div>
                        )
                    }
                },
                {title: "资源类型", dataIndex: "resource_type", key: "resource_type",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="gold">{rowData.resource_type}</Tag>
                            </div>
                        )
                    }
                },
                {title: "地址", dataIndex: "address", key: "address",
                    render: (text, rowData) => {
                        const private_ip = <div>{rowData.address ? "内: " + rowData.address : null}</div>
                        const public_ip = <div>{rowData.address_public ? "公: " + rowData.address_public : null}</div>
                        return(
                            <div>
                                {private_ip}
                                {public_ip}
                            </div>
                        )
                    }
                },
                {title: "实例规格", dataIndex: "db_class", key: "db_class",
                    render: (text, rowData) => {
                        const cpu = rowData.cpu ? <span>{rowData.cpu}C</span> : null
                        const memory = rowData.memory ? <span>{rowData.memory}M</span> : null
                        const disk = rowData.disk ? <span>{rowData.disk}G</span> : null
                        return(
                            <div>
                                <div>{rowData.db_class}</div>
                                <div>{cpu} {memory} {disk}</div>
                            </div>
                        )
                    }
                },
                {title: "操作系统", dataIndex: "os", key: "os",
                    render: (text, rowData) => {
                        return(
                            <div>{rowData.engine} {rowData.engine_version}</div>
                        )
                    }
                },
                {title: "付费类型", dataIndex: "pay_type", key: "pay_type"},
                {title: "过期时间", dataIndex: "expire_time", key: "expire_time"},

            ],
        }
        this.formRefLabel = React.createRef();

    }

    componentDidMount() {
        this.loadData()
        this.loadDataPlatform()
        this.loadDataBusiness()
    }

    loadDataPlatform = () => {
        const requestData = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/cloud/platform', {params: requestData}).then(response=>{
            const search_option_platform = []
            const resp_data = response.data.data.items
            for (let i = 0; i < resp_data.length; i++) {
                search_option_platform.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
            }
            this.setState({
                search_option_platform: search_option_platform
            })
        })
    }

    loadDataBusiness = () => {
        const requestDataBusiness = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/business', {params: requestDataBusiness}).then(response=>{
            const resp_data = response.data.data.items
            const label_list_option = []
            const label_list_option_name = []
            for (let i = 0; i < resp_data.length; i++) {
                label_list_option.push(<Option key={resp_data[i].id}>{resp_data[i].name}</Option>)
                label_list_option_name.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
            }
            this.setState({
                label_list_option: label_list_option,
                label_list_option_name: label_list_option_name
            })
        })
    }


    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'deleted': true,
            'search_common__contains': this.state.search_common,
            'business': this.state.search_business,
            'resource_type': this.state.search_instance_resource_type,
            'region': this.state.search_instance_region,
            'account_name': this.state.search_instance_account_name,
            'platform': this.state.search_instance_platform,
        }

        // 获取database列表
        http.get('/cloud/database', {params: requestData}).then(response=>{
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false
            })
        }).catch()
    }

    // 切换每页数量
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData()
        })
    }

     /** 搜索 */
    onFinishSearch = (data) => {
        this.setState({
            search_common: data.search_common ? data.search_common : null,
            search_instance_resource_type: data.resource_type ? data.resource_type : null,
            search_instance_platform: data.platform ? data.platform : null,
            search_instance_account_name: data.account_name ? data.account_name : null,
            search_instance_region: data.region ? data.region : null,

            page: 1
        })
        this.loadData()
    }

    // 搜索切换云平台
    onChangePlatform = (value) => {
        if (value) {
            this.setState({
                search_instance_platform: value
            })

            const requestData = {
                'page': 1,
                'limit': 1000,
                'platform': value
            }
    
            http.get('/cloud/account', {params: requestData}).then(response=>{
                const search_option_account = []
                const resp_data = response.data.data.items
                for (let i = 0; i < resp_data.length; i++) {
                    search_option_account.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
                }
                this.setState({
                    search_option_account: search_option_account
                })
            })
    
            http.get('/cloud/region', {params: requestData}).then(response=>{
                const search_option_region = []
                const resp_data = response.data.data.items
                for (let i = 0; i < resp_data.length; i++) {
                    search_option_region.push(<Option key={resp_data[i].code}>{resp_data[i].name}</Option>)
                }
                this.setState({
                    search_option_region: search_option_region
                })           
            })

        } else {
            this.setState({
                search_option_account: '',
                search_option_region: '',
            })
        }
    }

    // 搜索切换云区域
    onChangeRegion = (value) => {
        this.setState({
            search_instance_region: value ? value : null
        })
    }

    // 搜索云账户
    onChangeAccountName = (value) => {
        this.setState({
            search_instance_account_name: value ? value : null
        })
    }

    // 搜索业务线
    onChangeBusiness = (value) => {
        this.setState({
            search_business: value ? value : null
        })
    }

    // 批量选中标签
    onSelectChange = (selectedRowKeys) => {
        this.setState({
            selectedRowKeys: selectedRowKeys
        })
    }

    render(){
        const { loading, columns, dataSource, page, total, search_option_platform, search_option_account, search_option_region, selectedRowKeys, label_list_option_name } = this.state
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        }
        var myStyle = {margin: '20px'}
        var myStyle1 = {margin: '10px', float: 'right'}
        return (
            <Fragment>
                <Form layout="inline" onFinish={this.onFinishSearch}>
                    <Form.Item label="搜索内容" name="search_common">
                        <Input placeholder="实例ID/名称/地址"  />
                    </Form.Item>

                    <Form.Item label="云平台" name="platform">
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 200 }}
                            placeholder="请选择区域"
                            optionFilterProp="children"
                            onChange={this.onChangePlatform}
                            filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {search_option_platform}
                        </Select>
                    </Form.Item>   

                    <Form.Item label="云账户" name="account_name">
                            <Select
                                allowClear
                                showSearch
                                style={{ width: 200 }}
                                placeholder="请选择云账户"
                                onChange={this.onChangeAccountName}
                                >
                                {search_option_account}
                            </Select>                      
                    </Form.Item>   

                    <Form.Item label="区域" name="region">
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 200 }}
                            placeholder="请选择区域"
                            optionFilterProp="children"
                            onChange={this.onChangeRegion}
                            filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {search_option_region}
                        </Select>
                    </Form.Item>

                    <Form.Item label="标签搜索" name="search_business">
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="请选择区域"
                            optionFilterProp="children"
                            onChange={this.onChangeBusiness}
                            filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {label_list_option_name}
                        </Select>
                    </Form.Item>

                    <Form.Item label="资源类型" name="resource_type">
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 200 }}
                            placeholder="请选择资源类型"
                            >
                            <Option key="mysql">MySQL</Option>
                            <Option key="redis">Redis</Option>
                            <Option key="mongodb">MongoDB</Option>
                            <Option key="memcache">Memcache</Option>
                            <Option key="polardb">PolarDB</Option>
                            <Option key="adbpg">AdbPg</Option>
                            <Option key="rocketmq">RocketMQ</Option>
                            <Option key="zookeeper">ZooKeeper</Option>
                            <Option key="ads">ADS</Option>
                            <Option key="lindorm">Lindorm</Option>
                            <Option key="elasticsearch">ElasticSearch</Option>
                            <Option key="dts">DTS同步</Option>
                            <Option key="dts-subscribe">DTS订阅</Option>
                            <Option key="dts-migrate">DTS迁移</Option>
                            <Option key="dataworks-schedule">DataWorks调度</Option>
                            <Option key="dataworks-integration">DataWorks数据集成</Option>
                        </Select>                      
                    </Form.Item>
    
                    <Form.Item shouldUpdate={true}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>

                <div style={myStyle1}></div>

                <Table
                    pagination={false} 
                    rowSelection={rowSelection} 
                    rowKey="id" 
                    columns={columns} 
                    dataSource={dataSource}
                    loading={loading}
                    scroll={{ y: 600, x: '70vw' }}
                >
                </Table>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            current={page}
                            total={total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>

            </Fragment>
        )
    }
}

export default DatabaseHistory;